<template>
	<a-card>
		<div :class="advanced ? 'search' : null">
			<a-form layout="horizontal" :form="searchForm">
				<div :class="advanced ? null: 'fold'">
					<a-row>
						<a-col :md="6" :sm="24">
							<a-form-item label="推广员" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
								<a-input placeholder="请输入推广员姓名" v-model="searchForm.shopname" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="订单ID" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
								<a-input placeholder="请输入订单ID" v-model="searchForm.orderId" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
								<a-button type="primary" @click="search()">查询</a-button>
								<a-button @click="reset()">重置</a-button>
							</a-form-item>
						</a-col>
					</a-row>
				</div>
				
			</a-form>
		</div>
		<div>
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column fixed prop="id" label="ID" />
				<el-table-column prop="goodsName" label="推广员" />
				<el-table-column prop="rentType" label="所属账号" />
				<el-table-column prop="meal" label="提现金额" />
				<el-table-column prop="rent" label="提现方式" />
				<el-table-column prop="realMoney" label="收款人信息">
				</el-table-column>
				<el-table-column prop="buyOutMoney" label="流水号" />
				<el-table-column prop="buyOutMoney" label="申请时间" />
				<el-table-column prop="buyOutMoney" label="审核时间" />
				<el-table-column prop="buyOutMoney" label="提现到账时间" />
				<el-table-column prop="buyOutMoney" label="状态" />
				<el-table-column prop="buyOutMoney" label="原因" />
				<el-table-column prop="buyOutMoney" label="操作人" />
			</el-table>
		</div>
		<div class="flex align-center justify-end custom_page">
			<span class="total">共{{ pageTotal }}页</span>
			<span class="total">共{{ total }}条</span>
			<el-pagination class="text-right" prev-text="上一页" next-text="下一页" :page-size="pageSize"
				:page-sizes="pageList" :total="total" background :layout="layout" :current-page.sync="page"
				@current-change="handleCurrentChange" @size-change="handleSizeChange" />
		</div>
	</a-card>
</template>

<script>
	import { withdrawalLog } from '@/api/account'
	export default {
		name: 'FlowRecord',
		components: {
		},
		data() {
			return {
				advanced:true,
				searchForm:{
					shopname:'',
					orderId:''
				},
				total:0,
				tableData:[],
				page: 1,
				pageSize: 10,
				pageList: [5, 10, 20, 50, 100]
			}
		},
		computed: {
			pageTotal() {
				const num = Math.ceil(this.total / this.pageSize)
				return num > 0 ? num : 1
			},
			layout() {
				if (this.total === 0) {
					return 'prev, pager, next'
				}
				if (this.pageTotal > 1) {
					return 'sizes, prev, pager, next, jumper'
				}
				return 'sizes, prev, pager, next'
			}
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList(flag){
				if(!flag){
					this.tableData=[]
				}
				const {page,pageSize}={page:this.page,pageSize:this.pageSize}
				withdrawalLog({page,pageSize,...this.searchForm}).then(res=>{
					this.tableData=res.data
				})
			},
			changePageSize(val) {
				this.pageSize = val
				if (this.pageList.indexOf(val) === -1) {
					this.pageList.unshift(val)
				}
			},
			handleSizeChange(val) {
				this.page = 1
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			},
			// 查询
			search() {
				this.page = 1
				this.getList()
			},
			// 重置
			reset() {
				this.getList()
			},
		}
	}
</script>

<style>
	.result-success {
		.action:not(:first-child) {
			margin-left: 8px;
		}
	
		.project-name {
			font-size: 16px;
			color: @title-color;
			font-weight: 500;
			margin-bottom: 20px;
		}
		
	}
	.custom_page {
		margin-top: 15px;
	
		.total {
			margin-right: 10px;
		}
	
		.page_btn {
			color: #333333;
			background: #ffffff;
			border: 1px solid #eeeeee;
			font-size: 14px;
			padding-left: 12px;
			padding-right: 12px;
			min-width: 30px;
			border-radius: 2px;
			height: 28px;
			vertical-align: top;
			cursor: pointer;
		}
	
		.el-pagination__jump {
			margin-left: 10px;
			margin-right: 10px;
		}
		}
</style>
